@extends('layouts.home')
@section('content')
    <div class="blog-body">
        <style>
            .production-box {
                background-color: #fff;
                -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
                -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
            }

            .production-cover {
                padding: 3px;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                border-bottom: 1px solid #e2e2e2;
            }

            .production-cover img {
                width: 100%;
            }

            .production-title {
                height: 50px;
                line-height: 50px;
                text-align: center;
                font-size: 18px;
                text-shadow: 0px 0px 4px #00ffff, 0px 0px 4px #0094ff, 0px 0px 4px #0026ff;
                color: #fcfbfb
            }

            .production-intro {
                background-color: #000;
            }

            .production-intro p {
                margin-top: 46%;
                text-align: center;
                font-size: 16px;
                padding: 0 20px;
            }

            .production-intro a {
                color: #fff;
                display: inline-block;
                padding: 10px 20px;
                -moz-box-shadow: 0px 0px 2px 2px #b6ff00;
                -webkit-box-shadow: 0px 0px 2px 2px #b6ff00;
                box-shadow: 0px 0px 2px 2px #b6ff00;
            }
        </style>
        <div class="layui-container">
            <div class="layui-row layui-col-space15">
                @foreach($git_project as $project)
                <div class="layui-col-lg3 layui-col-sm4">

                        <div class="production-box">
                            <div class="production-cover">
                                <img src="{{$project->pic ?? ''}}" alt={{$project->title??''}} />
                            </div>
                            <div class="production-title">{{$project->title??''}}</div>
                            <div class="production-intro" style="display:none;">
                                <p><a href="{{$project->url}}" target="_blank">查看</a></p>
                            </div>
                        </div>

                </div>
                @endforeach
            </div>
        </div>

        <script src="/lib/layui/layui.js?v=Q4hfA5tL6flbhH6c-jlA6yVJRpZRgzEJ43xJxeRS3Ps"></script>


        <script src="/js/sHover.min.js?v=hVsUGvjrjtJN7tJA41ry_syM5j1vx3GHr-z6ZvjmuGw"></script>

        <script>
            window.onload = function () {
                var a = new sHover("production-box", "production-intro");
                a.set({
                    slideSpeed: 7,
                    opacityChange: true,
                    opacity: 70
                });
            }
        </script>
    </div>
@endsection
